<template>
    <div class="formBox">
      <t-form :model="searchData" label-width="98">
        <t-row>
          <t-col>
            <t-form-item label="护理项目名称：" name="name">
              <t-input
                placeholder="请输入内容"
                v-model="searchData.name"
                class="form-item-content"
                type="search"
                clearable
                @clear="handleClear('name')"
              />
            </t-form-item>
          </t-col>
          <t-col>
            <t-form-item label="状态：" name="status">
              <t-select
                clearable
                v-model="searchData.status"
                placeholder="请输入内容"
                @clear="handleClear('status')"
              >
                <t-option
                  v-for="(item, index) in statusData"
                  :key="index"
                  :value="item.id"
                  :label="item.value"
                  title=""
                />
              </t-select>
            </t-form-item>
          </t-col>
          <t-col class="searchBtn">
            <button type="button" class="bt-grey wt-60" @click="handleReset()">
              重置
            </button>
            <button type="button" class="bt wt-60" @click="handleSearch()">
              搜索
            </button>
          </t-col>
        </t-row>
      </t-form>
    </div>
  </template>
  <script setup lang="jsx">
  import { statusData } from '@/utils/commonData'
  
  //接收属性
  const props = defineProps({
    searchData: {
      type: Object,
      default: {}
    }
  })
  //接收事件
  const emits = defineEmits(['handleClear', 'handleReset', 'handleSearch'])
  
  //执行事件
  const handleClear = (val) => {
    emits('handleClear', val)
  }
  const handleReset = () => {
    emits('handleReset')
  }
  const handleSearch = () => {
    emits('handleSearch')
  }
  </script>
  <style scoped></style>
  